<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双飞翼布局</title>
		<link rel="stylesheet" type="text/css" href="css/reset-min.css"/>
		<style type="text/css">
			.clearfix:before,
			.clearfix:after{
				content: "";
				display: table;
				clear: both;
			}
			.clearfix{
				zoom: 1;
			}
			body{
				/* 最小宽度2*left + right */
				min-width: 600px;
			}
			.header,.footer{
				height: 100px;
				text-align: center;
				border: 1px solid blue;
				background-color: #00FFFF;
			}
			.content{
				overflow: hidden;
			}
			.content .left,.content .middle,.content .right{
				padding-bottom: 10000px;
				margin-bottom: -10000px;
				float: left;
			}
			.content .middle{
				background-color: #BBFFAA;
			}
			.content .left,.content .right{
				background-color: yellow;
				width: 200px;
			}
			.content .middle{
				width: 100%;
			}
			.content .left{
				margin-left: -100%;
			}
			.content .right{
				margin-left: -200px;
			}
			/* middle的边界关联到left和right
			 * 所以不能给middle加padding，
			 * 给inner加padding就可以了
			 */
			.content .middle .m_inner{
				padding: 0px 200px;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<h4>Header</h4>
		</div>
		<div class="content">
			<div class="middle">
				<!--
					真正的内容放着里，middle的css不要动，给这个inner加padding就可以使内容展现出来了
				-->
				<div class="m_inner">middle</div>
			</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
		<div class="footer">
			<h4>Footer</h4>
		</div>
	</body>
</html>
